<!-- Author: Edwin -->
<template>
  <!-- <cui-dialog :visible='$store.state.drillThrough.dialogStatus'
              @closeDialog='$store.state.drillThrough.dialogStatus = false'
              class="get-started-dialog"
              bodyStyle='width:1024px;padding:0;border:none;top:9vh;'> -->
  <el-dialog :visible="$store.state.drillThrough.dialogStatus"
             width="80%"
             custom-class="drill-through-dialog"
             :modal='true'
             @close='closeDialog'
             append-to-body
             destroy-on-close>
    <Dashboard :actionPageId='actionPageId'
               ref="drill-through" />
  </el-dialog>
  <!-- </cui-dialog> -->
</template>

<script>
import Dashboard from './index'

export default {
  components: { Dashboard },
  data () {
    return {
    }
  },
  computed: {
    dialogStatus () {
      return this.$store.state.drillThrough.dialogStatus
    },
    actionPageId () {
      return this.$store.state.drillThrough.pageid
    }
  },
  watch: {
    dialogStatus (val) {
      if (val) {
        setTimeout(() => {
          this.$refs['drill-through'].getDashboardLayout()
          this.$refs['drill-through'].getSlicerInfo()
        }, 300)
      }
    }
  },
  methods: {
    closeDialog () {
      this.$store.state.drillThrough.dialogStatus = false
      this.$store.state.drillThrough.pageid = null
    }
  }
}
</script>

<style lang='scss'>
.drill-through-dialog {
  .el-dialog__body {
    min-height: 70vh;
  }
}
</style>
